<template>
  <div id="newCustomer" class="newCustomer">
	  <group>
		  <cell class="customerCell" title="课程类型" :value="activity_type" is-link @click.native="showPopup=true"></cell>
		  <x-input title="课时" type="number" v-model="points" placeholder="课时数量"></x-input>
		  <x-input title="价格" type="number" v-model="amount" placeholder="合同价值"></x-input>
		  <datetime class="customerCell" title="开始日期" value-text-align="right" v-model="start_date"></datetime>
		  <datetime class="customerCell" title="截止日期" value-text-align="right" v-model="end_date"></datetime>
		  <PickList ref="employeeRef" url="users/users_pop" cellTitle="销售" listTitle="销售列表" max="1"></PickList>
		  <x-textarea title="备注" v-model="description" placeholder="备注" :show-counter="true" :rows="1" autosize></x-textarea>
	  </group>

	  <div v-transfer-dom>
		  <popup v-model="showPopup" class="checker-popup">
			  <div style="padding:10px 10px 40px 10px;">
				  <p style="padding: 5px 5px 5px 2px;color:#888;">课程类型</p>
				  <checker
					  v-model="activity_type"
					  default-item-class="demo4-item"
					  selected-item-class="demo4-item-selected"
					  disabled-item-class="demo4-item-disabled">
					  <checker-item v-for="(item,index) in items" :value="item.value" @on-item-click="onItemClick(item.id)"> {{item.value}} </checker-item>
				  </checker>
			  </div>
		  </popup>
	  </div>

	  <div class="error" v-show="error">{{error}}</div>

	  <flexbox>
		  <flexbox-item>
			  <x-button class="flexBtn_confirm" :gradients="['#FF5E3A', '#FF9500']" @click.native="createContract">确定</x-button>
		  </flexbox-item>
		  <flexbox-item>
			  <x-button class="flexBtn_cancel" @click.native="cancel">取消</x-button>
		  </flexbox-item>
	  </flexbox>

  </div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../../utils/networking'
	import PickList from '../../../../components/mobile/picklist/picklist'
  import {Group, XInput, XButton, Cell, TransferDom, Popup, Checker, CheckerItem, Datetime, Flexbox, FlexboxItem, XTextarea} from 'vux'
  export default {
    name: "newSignedLesson",
	  directives: {
		  TransferDom
	  },
    components:{
	    PickList,
      Group,
      XInput,
      XButton,
      Cell,
	    TransferDom,
	    Checker,
	    CheckerItem,
	    Popup,
	    Datetime,
	    Flexbox,
	    FlexboxItem,
	    XTextarea
    },
    data() {
    	return {
    		id: this.$route.params.id,
		    showPopup: false,
		    points: '',
		    amount: '',
		    activity_type: '',
		    activity_type_id: '',
		    items: [],
		    start_date: '',
		    end_date: '',
		    description: '',
		    error: ''
	    }
    },
	  created: function () {
		  bus.$emit("setTopSimpleTitle", '新建合同')

		  let _this = this
		  NetWorking.doGet(
			  'list_of_value/getListOfValueByType',
			  null,
			  {
				  params: {
					  type: 'S_LOV_LESSON'
				  }
			  }
		  ).then(
			  response => {
				  let rs = response.data
				  if(rs.error_code == 0){
					  _this.items = rs.list_of_value
				  }else{
					  alert(rs.error_message)
				  }
			  }
		  )
	  },
    methods: {
	    cancel: function () {
		    this.$router.go(-1)
	    },
	    onItemClick (value) {
		    this.activity_type_id = value

		    if (!this.disabled) {
			    this.showPopup = false
		    }
	    },
	    createContract: function () {
		    if(this.activity_type_id == ''){
			    this.error = "请确认课程类型是正确的"
			    return
		    }

		    if(this.points <= 0){
			    this.error = "请确认课时数是正确的"
			    return
		    }

		    if(this.start_date == '' || this.end_date == ''){
			    this.error = "请输入正确的有效期开始和截止时间"
			    return
		    }

		    if(this.start_date > this.end_date){
			    this.error = "截止期不能小于起始日期"
			    return
		    }

		    let _this = this
		    NetWorking.doPost(
			    'contract',
			    null,
			    {
				    customer_id: this.id,
				    lesson_id: this.activity_type_id,
				    start_date: this.start_date,
				    end_date: this.end_date,
				    points: this.points,
				    amount: this.amount,
				    description: this.description
			    },
			    {
				    headers: {
					    'Content-Type': 'application/json;charset=utf-8',
					    'data': 'JSON.stringify(json)'
				    },
				    params: {
					    "employeeList": JSON.stringify(this.$refs.employeeRef.fullValues)
				    }
			    }
		    ).then(
			    response => {
				    let rs = response.data
				    if(rs.error_code == 0){
					    this.$router.go(-1)
				    }else{
					    alert(rs.error_message);
				    }
			    }
		    )
	    }
    }
  }
</script>

<style>
	.flexBtn {
		width: 80% !important;
		margin-top: 15px;
		margin-bottom: 5px;
		border-radius: 25px;
	}
	
	.error{
		font-size: 15px;
		color:red;
		text-align: center;
		margin-top: 10px;
	}

  .newCustomer {
    border: solid;
    border-color: #f7f7fa;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 56px;
    box-shadow: 5px 5px 5px #888888;
    border-radius: 25px;
  }
  .buttonCustomer {
    border-radius: 25px;
	  margin-top: 15px;
  }

	.customerCell {
		height: 1.41176471em !important;
		line-height: 1.41176471 !important;
		text-decoration: none;
	}

	.weui-cell__bd {
		text-align: left;
	}
</style>
